<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="分组">
          <cn-dict-select-tag
            placeholder="请选择分组"
            dict-code="budget_group"
            @change="handleChangeRuleCondition"
            triggerChange
            :options="{value:'dictDataCode',label:'dictDataDesc'}"
            v-decorator.trim="[ 'subjectsGroupCode', validatorRules.budgetGroup]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="预算名称">
          <a-input placeholder="请输入预算名称" v-decorator="['budgetName', validatorRules.budgetName]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="预算年">
          <a-date-picker
            mode="year"
            placeholder="请选择预算年"
            format='YYYY'
            valueFormat="YYYY"
            v-decorator="[ 'budgetYear',validatorRules.budgetYear]"
            style="width:100%"
            :open='yearShowOne'
            @openChange="openChangeOne"
            @panelChange="panelChangeOne"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="预算月">
          <a-month-picker placeholder="请输入预算月"   format='MM' valueFormat="MM" v-decorator="[ 'budgetMonth',validatorRules.budgetMonth]"/>
        </a-form-item>
        <a-form-item v-show="show_productName"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     label="产品名称">
          <!--          <a-input placeholder="请输入产品名称" v-decorator="['productName', {}]" />-->
          <j-select-product placeholder="请选择产品" v-if="show_productName" :multiple="false" v-decorator="['productCode', validatorRules.productCode]"/>
        </a-form-item>

        <a-form-item v-show="show_custName"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     label="客户名称">
          <j-select-cust placeholder="请选择客户" :multiple="false" v-decorator="['custCode', {}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="预算科目名称">
          <j-select-subjects placeholder="请选择预算科目" :multiple="false" v-decorator="['budgetSubjectsCode', validatorRules.budgetSubjectsCode]"/>
        </a-form-item>
        <a-form-item v-show="show_terminalName"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     label="终端名称">
<!--          <a-input placeholder="请输入门店名称" v-decorator="['terminalName', {}]" />-->
          <j-select-terminal placeholder="请选择门店" :multiple="false" v-decorator="['terminalCode', {}]"/>
        </a-form-item>
        <a-form-item v-show ="show_initAmount"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     label="初期金额">
          <a-input-number v-decorator="[ 'initAmount', {}]" />
        </a-form-item>
        <a-form-item v-show ="show_amount"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     label="当前余额">
          <a-input-number v-decorator="[ 'amount', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注">
          <a-textarea placeholder="请输入备注" v-decorator="['remarks', {}]" />
        </a-form-item>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import JSelectProduct from '@/components/cn-select-popup/JSelectProduct'
  import JSelectCust from '@/components/cn-select-popup/CnSelectCust'
  import JSelectTerminal from '@/components/cn-select-popup/JSelectTerminal'
  import JSelectSubjects from '@/components/cn-select-popup/JSelectSubjects'
  import JTreeSelect from "@/components/cn-form/JTreeSelect";
  export default {
    name: "TpmBudgetFeeModal",
    components:{
      JSelectProduct,
      JSelectCust,
      JTreeSelect,
      JSelectSubjects,
      JSelectTerminal
    },
    data () {
      return {
        title:"操作",
        visible: false,
        yearShowOne:false,
        show_budget_year: false,
        show_budget_month: false,
        show_budgetOrgCode: false,
        show_budgetOrgId: false,
        show_budgetOrgName: false,
        show_productCode: false,
        show_productName: false,
        show_custCode: false,
        show_custName: false,
        show_budgetSubjectsCode: false,
        show_budgetSubjectsName: false,
        show_terminalCode: false,
        show_terminalName: false,
        show_subjectsGroupName: false,
        show_subjectsGroupCode: false,
        show_initAmount: false,
        show_amount: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          budgetGroup:{rules: [{ required: true, message: '请选择分组!' }]},
          budgetName:{rules: [{ required: true, message: '请输入预算名称!' }]},
          budgetYear:{rules: [{ required: true, message: '请选择预算年!' }]},
          budgetMonth:{rules: [{ required: true, message: '请输入预算月!' }]},
          productCode:{rules: [{ required: true, message: '请选择产品!' }]},
          budgetSubjectsCode:{rules: [{ required: true, message: '请选择预算科目!' }]},
        },
        url: {
          add: window._CONFIG['domianTpmURL']+"/budget/tpmBudgetFee/saveOrUpdate",
        },
      }
    },
    created () {
    },
    methods: {
      openChangeOne(status){
        //status是打开或关闭的状态
        if(status){
          this.yearShowOne =  true
        }
      },
      // 得到年份选择器的值
      panelChangeOne(value){
        this.form.setFieldsValue({
          budgetYear: moment(value).format('YYYY')
        })
        this.yearShowOne = false
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.handleChangeRuleCondition(this.model.subjectsGroupCode);
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'remarks','budgetCode','budgetName','budgetYear','budgetMonth','budgetOrgCode','budgetOrgId','budgetOrgName','vkorgCode','vkorgName','productCode','productName','custCode','custName','budgetSubjectsCode','budgetSubjectsName','terminalCode','terminalName','subjectsGroupCode','subjectsGroupName','initAmount','amount','productLevelCode','productLevelName','custOrgCode','custOrgName','specialAreaCode','specialAreaName','afterAmount'))
          //时间格式化
        });

      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            httpurl += this.url.add
            method = 'post'
            let formData = Object.assign(this.model, values);
            //时间格式化
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })



          }
        })
      },
      handleChangeRuleCondition(val){
        //cust_budget org_budget  branch_budget
        this.form.resetFields()
        if(val=='cust_budget'){
          this.show_productName = true
          this.show_custName = true
          this.show_initAmount = true
          this.show_terminalName = false
        }else  if(val=='org_budget'){
          this.show_productName = false
          this.show_terminalName = false
          this.show_custName = false
          this.show_initAmount = false

        }else  if(val=='branch_budget'){
          this.show_productName = true
          this.show_terminalName = true
          this.show_initAmount = true
          this.show_custName = false
        }
        this.form.setFieldsValue({
          subjectsGroupCode: val
        })
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>

</style>